import React, { memo, useEffect, useState } from 'react'
import PropTypes from 'prop-types';
import { Input, Button, Pagination } from 'antd';
import moment from 'moment';
/* 
 flag 的取值问题
  flag: 1 表示排行榜和 歌单的 评论

*/

// 引入 排行榜评论的接口，  排行榜评论的接口 === 歌单评论的接口
import { getGedanComment } from '../../api/gedanApi'
// 引入工具函数
import { getCount } from '../../utils/format'
import { CommentsBox, Main, Comments } from './style'
function CommentComponent(props) {
  const { TextArea } = Input;
  // 解构 props
  const { flag, id } = props
  // state 
  const [hotComments, setHotComments] = useState([])
  const [comments, setComments] = useState([])
  const [query, setQuery] = useState({ limit: 10, offset: 0 })
  const [total, setTotal] = useState(0)
  const [current, setCurrent] = useState(1)
  // redux hooks
  // ajax
  // useEffect(() => {
  //   getGedanComment(id, query).then(res => {
  //     if (res.code === 200) {
  //       setHotComments(res.hotComments)
  //       console.log(res.comments);
  //       setTotal(res.total)
  //       setComments(res.comments)
  //     }
  //   })
  // }, [])
  // 查询参数改变的时候
  useEffect(() => {
    console.log('query 改变');
    getGedanComment(id, query).then(res => {
      if (res.code === 200) {
        setHotComments(res.hotComments)
        setTotal(res.total)
        setComments(res.comments)
      }
    })
  }, [query, id])


  // other
  const changePagination = page => {
    let newQuery = { ...query }
    newQuery.offset = (page - 1) * newQuery.limit

    setQuery(newQuery)
    setCurrent(page)
  }
  return (
    <Main>
      {/* 评论 */}
      <Comments>
        <h2>
          评论 <span>共{total}条评论</span>
        </h2>
        <TextArea allowClear maxLength={200} showCount placeholder="说说你的看法吧" autoSize={{ maxRows: 6, minRows: 4 }}></TextArea>
        <Button style={{ backgroundColor: "#3ac27c", color: "#ffffff", marginTop: "10px" }}>发表评论</Button>
      </Comments>
      {/* 精彩评论 */}
      {
        flag == 1 ?
          null :
          (<CommentsBox>
            <h2>精彩评论</h2>
            {
              hotComments.map((item, index) => {
                return (
                  <div className="comments_item" key={index}>
                    <img src={item.user.avatarUrl} alt="" />
                    <div className="comments_item_info">
                      <h4 className="comments_item_info_name">{item.user.nickname}</h4>
                      <div className="comments_item_info_time">{
                        item.timeStr ? item.timeStr : moment(item.time).fromNow()
                      }</div>
                      <div className="comments_item_info_content">
                        {item.content}
                      </div>
                      <div className="comments_item_info_icon">
                        <span className="iconfont icon-dianzan" style={{ fontSize: "20px" }}></span> {getCount(item.likedCount)}
                      </div>
                    </div>
                  </div>
                )
              })
            }
          </CommentsBox>)
      }
      {/* 全部评论 */}
      <CommentsBox>
        <h2>全部评论</h2>
        {
          comments.map((item, index) => {
            return (
              <div className="comments_item" key={index}>
                <img src={item.user.avatarUrl} alt="" />
                <div className="comments_item_info">
                  <h4 className="comments_item_info_name">{item.user.nickname}</h4>
                  <div className="comments_item_info_time">{
                    item.timeStr ? item.timeStr : moment(item.time).fromNow()
                  }</div>
                  <div className="comments_item_info_content">
                    {item.content}
                  </div>
                  <div className="comments_item_info_icon">
                    <span className="iconfont icon-dianzan" style={{ fontSize: "20px" }}></span> {item.likedCount == 0 ? null : getCount(item.likedCount)}
                  </div>

                  {
                    item.beReplied.length != 0 ? (
                      <div className="comments_item_children">
                        <div className="comments_item_children_left">
                          <span>
                            {item.beReplied && item.beReplied[0].user.nickname} &nbsp;:
                          </span>
                          &nbsp; {item.beReplied[0].content}
                        </div>
                        {/* <div className="comments_item_children_right">
                          <span className="iconfont icon-dianzan" style={{ fontSize: "20px" }}></span> {getCount(item.likedCount)}
                        </div> */}
                      </div>
                    ) : null
                  }
                </div>
              </div>
            )
          })
        }


        {/* 全部评论的分页 */}
        <Pagination onChange={changePagination} current={current} showSizeChanger={false} total={total} />
      </CommentsBox>
    </Main>
  )
}

CommentComponent.propTypes = {
  flag: PropTypes.number.isRequired
}
CommentComponent.defaultProps = {
  flag: 1

}


export default memo(CommentComponent)